<template>
    <div class="nav">
        <div class="logo">
            <img src="@/assets/images/logo.svg" alt="">
        </div>
        <ul class="nav-right">
            <li>
              <el-button  type="danger" size="mini" @click="logout">退出登录</el-button>
            </li>
            <li>
              <router-link to='/login' v-show="!name">
                <el-button size="mini">登录</el-button>
              </router-link>
            </li>
            <li>
              <router-link to="/shopcart">购物车</router-link>
            </li>
            <li>
              <router-link to="/home">首页</router-link>
            </li>
            <li>
              <div>{{name}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import UserHttp from '../../../models/User'
    export default {
      data() {
        return {
          name:this.$cookie.get('username')
        }
      },
       methods: {
          async logout(){
            var res = await UserHttp.logout()
            var {msg} = res.data;
            this.$message({
              message:msg,
              type:'success'
            })
            this.name=''
          }
       },
    }
</script>

<style scoped>
.nav {
  height: 40px;
  line-height: 40px;
  padding: 5px 100px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.logo {
  float: left;
}
.logo img{
    width: 40px;
}
.nav .nav-right li {
  float: right;
  list-style: none;
  margin-right: 20px;
}
.nav .nav-right li a {
  text-decoration: none;
  color: #666;
}
</style>